<template>
  <div class="item">
    <embed class="pic" :src="svgImg" type="image/svg+xml"/>
  </div>
</template>

<script>
import svgX from "../../../public/svg/X.svg"
export default {
  data() {
    return {
      url:"http://218.93.116.192:8087/geoserver/xf/wms",
      layers:"xf:两湖创新区",
      svgImg:svgX,
      layersList:[
        "xf:两湖创新区",
        "xf:ppt创新之核",
        "xf:ppt中以",
        "xf:ppt高架沿线",
        "xf:ppt沟南",
        "xf:ppt长沟河",
      ],
      nameList:[
        "两湖创新",
        "创新之核",
        "中以",
        "高架沿线",
        "沟南",
        "长沟河"
      ],
      locationList:[
        {lonLat:[119.72, 31.66],zoom:10.8},
        {lonLat:[119.945, 31.68],zoom:13},
        {lonLat:[119.982, 31.683],zoom:14.2},
        {lonLat:[119.94, 31.71],zoom:12.3},
        {lonLat:[119.92, 31.683],zoom:14.8},
        {lonLat:[119.925, 31.724],zoom:13.5},
      ],
      lonLat:[119.72, 31.66],
      zoom:10.8,
      name:"重要板块"
    };
  },
  created() {

  },
  mounted() {
    window.svgFunctionX = this.svgFunctionX
  },
  beforeDestroy() {
  },
  methods: {
    svgFunctionX(index) {
      console.log('被调用的方法----------数据：' + index)
      if (index<=5){
        this.layers=this.layersList[index]
        this.lonLat=this.locationList[index].lonLat
        this.zoom=this.locationList[index].zoom
        this.name=this.nameList[index]
        this.changeMapzdcy()
      }
    },
    changeMapzdcy(){
      var that=this
      var url=this.url
      var layers=this.layers
      this.$store.state.mapChangeData={
        url:url,
        name:that.name,
        params:{
          LAYERS: layers
        },
        location:this.lonLat,
        zoom:this.zoom
      }
    },
    changeMap(){
      this.$store.state.mapChangeData={
        url:"http://218.93.116.192:8087/geoserver/xf/wms",
        name:"两湖创新区",
        params:{
          LAYERS: "xf:两湖创新区"
        },
        location:[119.72, 31.66],
        zoom:10.8
      }
    },
  },
};
</script>
<style lang='scss' scoped>
.item{
  width: 100%;
  height: 100%;
  //padding: 16px 16px 10px 16px;
  box-sizing: border-box;
  background-size: cover;
  background-position: center center;
  //background-image: url("../../assets/img/datav/95/X.png");
}
</style>
